@motionone/animation

What is @motionone/animation?

The @motionone/animation package is a powerful library for creating animations in web applications. It provides a simple yet flexible API for animating elements with both JavaScript and CSS properties, allowing developers to create smooth, performant animations with ease.

What are @motionone/animation's main functionalities?

Animating CSS properties

This feature allows you to animate CSS properties of an element. The code sample demonstrates how to fade in an element by animating its opacity from 0 to 1 over 1 second.

animate(element, { opacity: [0, 1] }, { duration: 1 })

Animating SVG attributes

With this feature, you can animate SVG attributes. The example shows how to animate the strokeDashoffset attribute from 100 to 0, which can be used to create a drawing effect for SVG paths.

animate(element, { strokeDashoffset: [100, 0] }, { duration: 1 })

Timeline animations

This feature enables the creation of complex animations that involve multiple elements and animations in a sequence or in parallel. The code sample illustrates how to fade in one element while simultaneously moving another element horizontally, with the second animation starting 0.5 seconds later.

timeline([[elementA, { opacity: [0, 1] }, { duration: 1 }], [elementB, { x: [0, 100] }, { duration: 1, delay: 0.5 }]])

Other packages similar to @motionone/animation

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Compared to @motionone/animation, Anime.js offers a similar range of features but with a different syntax and additional capabilities for timeline control and easing functions.

gsap

GSAP (GreenSock Animation Platform) is a robust, professional-grade toolkit for creating animations. It offers a wide range of features including advanced timeline management, plugins for common tasks, and compatibility with a variety of environments. GSAP is more feature-rich compared to @motionone/animation, making it suitable for complex animations but potentially overkill for simpler tasks.

popmotion

Popmotion is a functional, reactive animation library. It provides a low-level API for creating animations and interactions. Compared to @motionone/animation, Popmotion offers more control over the animation logic and is designed to be more composable, but it might require more boilerplate code for common tasks.

README

@motionone/animation

A simple number-only semi-implementation of WAAPI.

📚 Documentation

Full docs for Motion One available at motion.dev.